<div class="text-field"
     ng-class="{ 'text-field--error': lxTextField.error,
                 'text-field--fixed-label': lxTextField.fixedLabel,
                 'text-field--has-icon': lxTextField.icon,
                 'text-field--has-value': lxTextField.hasValue(),
                 'text-field--is-active': lxTextField.isActive,
                 'text-field--is-disabled': lxTextField.ngDisabled,
                 'text-field--is-focus': lxTextField.isFocus,
                 'text-field--theme-light': !lxTextField.theme || lxTextField.theme === 'light',
                 'text-field--theme-dark': lxTextField.theme === 'dark',
                 'text-field--valid': lxTextField.valid }">
    <div class="text-field__icon" ng-if="lxTextField.icon">
        <i class="mdi mdi-{{ lxTextField.icon }}"></i>
    </div>

    <label class="text-field__label">
        {{ lxTextField.label }}
    </label>

    <div ng-transclude></div>

    <span class="text-field__clear" ng-click="lxTextField.clearInput($event)" ng-if="lxTextField.allowClear">
        <i class="mdi mdi-close-circle"></i>
    </span>
</div>
